import React, { Component } from 'react'
import moment from 'moment'
import Crumbs from './Crumbs/index.jsx'
import ask from '../../serve/api';
import PublishNews from './../focusNews/PublishNews'
import styles from './CommonDetail.module.scss'
import { backTop } from './../../util/index'

const router = [{
  name: '热点资讯',
  path: 'hotNews'
}, {
  name: '要闻动态',
  path: 'focusNews'
}, {
  name: '会议论坛',
  path: 'forum'
}, {
  name: '智库成果',
  path: 'result'
}, {
  name: '智库联盟',
  path: 'org'
}, {
  name: '学者观点',
  path: 'viewpoint'
}, {
  name: '政策法规',
  path: 'article'
}, {
  name: '社会服务调查',
  path: 'qa'
}, {
  name: '智库单位机构活动列表',
  path: 'orgDynamic'
}, {
  name: '智库评价',
  path: 'evaluation'
}]

export default class CommonDetail extends Component {

  constructor(props) {
    super(props)
    this.state = {
      loadState: 'pending',
      contentData: {},
      // 页面类型
      pageType: '',
      // 页面类型下 具体文章id
      id: '',
      nowList: []
    }
  }

  componentDidMount() {
    const { match } = this.props;
    const pageType = match.params.pageType;
    console.log(pageType)
    const id = match.params.id;

    const listApi = 'list' + pageType.substring(0, 1).toUpperCase() + pageType.substring(1) + 'Api';
    if (pageType === 'qa') {
      this.fetchContentData(pageType, { qId: id });
    } else {
      this.fetchContentData(pageType, { id });
    }
    this.getNowList(listApi, { page: 1, pageSize: 6 })
    this.setState({
      pageType,
      id,
    });
  }

  // 获取详情数据
  async fetchContentData(pageType, params) {
    let api = ''
    if (pageType === 'evaluation') {
      api = 'fetchEvaluationInfo'
    } else {
      api = 'fetch' + pageType.substring(0, 1).toUpperCase() + pageType.substring(1) + 'Info';
    }
    if (api !== '') {
      const { code, result } = await ask[api](params);
      try {
        if (code !== '000000') {
          throw new Error('数据出错');
        };
        if (result) {
          this.setState({
            loadState: 'success',
            contentData: result,
          });
        } else {
          this.setState({
            loadState: 'error',
          });
        }
      } catch (error) {
        console.log(error);
        this.setState({
          loadState: 'error',
        });
      }
    }
  }

  async getNowList(api, params) {
    console.log(api)
    let requestApi = 'listHotNewsApi'
    if (api) {
      requestApi = api
    }
    const { code, result } = await ask[requestApi](params)
    if (code !== '000000') {
      return
    }
    if (result) {
      this.setState({
        nowList: result
      })
    }
  }

  onItem(item) {
    this.fetchContentData(this.state.pageType, { id: item.id })
  }

  goToTop() {
    backTop()
  }

  render() {
    const { contentData, pageType, nowList } = this.state
    const path = `/mainPage/${pageType}`;
    const crumbsItem = router.filter(item => item.path === pageType)[0]
    let crumbsList = [{
      name: '首页',
      path: '/mainPage/main',
    }, {
      name: '详情',
      path: '',
    }];
    crumbsList.splice(-1, 0, {
      name: crumbsItem && crumbsItem.name,
      path,
    });

    return (
      <div className={styles.common_container}>
        <Crumbs list={crumbsList || []} />
        <div className={styles.common_detail}>
          <div className={styles.detail_content}>
            <div className={styles.title_info}>
              <div className={styles.title}>
                {contentData.title || contentData.name || ''}
              </div>
              <div className={styles.sub_title}>
                {contentData.sub_title || ''}
              </div>
              <div className={styles.info_bg}>
                <div className={styles.info}>
                  <div className={styles.author}>
                    作者：
                    <span>{contentData.author || ''}</span>
                  </div>
                  <div className={styles.origin}>
                    来源：
                    <span>{contentData.origin || ''}</span>
                  </div>
                </div>
                <div className={styles.click_num}>
                  点击量：{contentData.click_times || ''}
                  <span>{moment(contentData.public_at).format('YYYY-MM-DD')}</span>
                </div>
              </div>
            </div>
            <div className={styles.html_content}>
              <div class="ql-container ql-snow">
                <div class="ql-editor">
                  <div dangerouslySetInnerHTML={{ __html: contentData.content }}>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.detail_list}>
            <PublishNews datas={nowList} onItem={item => this.onItem(item)} />
          </div>
        </div>
        {/* <div className={styles.backTop} onClick={() => this.goToTop()}>
          返回顶部
        </div> */}
      </div>
    )
  }
}
